<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox, ElLoading } from "element-plus";
import { RecruitAdd } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    const checkCont = (rule, value, callback) => {
      if (value.length >= 20) {
        callback();
      } else {
        callback(new Error("发布内容不能少于20个字符"));
      }
    };
    return {
      formData: {
        recruit_content: "",
      },
      rules: {
        recruit_content: [
          {
            validator: checkCont,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    backFn() {
      this.$router.back();
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const { data } = await RecruitAdd(this.formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "发布成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
  },
  mounted() {},
  async created() {},
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>发布招募岗位</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <div class="formDes">
          <el-form
            label-width="120"
            :rules="rules"
            ref="ruleForm"
            :model="formData"
          >
            <div class="formHeadCont">
              <div class="headShu"></div>
              <div>招募信息</div>
            </div>
            <div class="flexCont">
              <el-form-item
                class="flexPull"
                label="招募内容"
                prop="recruit_content"
              >
                <el-input
                  v-model="formData.recruit_content"
                  maxlength="3000"
                  placeholder="请详细描述招募内容（例如：描述招募的岗位、薪资、地区、证书、船名、要求等）"
                  show-word-limit
                  :rows="8"
                  type="textarea"
                />
              </el-form-item>
            </div>
            <el-form-item class="flexPull" label=" ">
              <btn value="确认发布" @ok="saveFn"></btn>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
